<div class="layuimini-container layui-anim layui-anim-upbit">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" id="form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择日期</label>
                            <div class="layui-input-inline" style="width: 180px;">
                                <input type="text" name="startTime" id="date1" autocomplete="off" class="layui-input">
                            </div>
                            <label style="float: left;padding-top: 4px;padding-right: 4px;">_&nbsp;&nbsp;</label>
                            <div class="layui-input-inline" style="width: 180px;">
                                <input type="text" name="endTime" id="date2" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">回复状态</label>
                            <div class="layui-input-inline">
                                <select id="select2" style="text-align: center;text-align-last: center;width: auto;"
                                    name="state" autocomplete="off" class="layui-input">
                                    <option value="">全部</option>
                                    <option value=0>未处理</option>
                                    <option value=1>正在处理</option>
                                    <option value=2>已处理</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn" style="margin-left:10px;width:100px;height:38px;border:none;outline:none;border-radius:6px;background-color:#007bff;color:white"><i
                                    class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <br>
        <table id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="getStatus">
            {{#  if(d.status === "0"){    }}
            未处理
            {{#  }else if(d.status === "1") {  }}
            正在处理
            {{#  }else if(d.status === "2") {  }}
            已处理
            {{#  } }}
        </script> 

        <script type="text/html" id="currentTableBar">
                
                {{# if(d.status === '2'){ }}
                <button class="layui-btn layui-btn-xs layui-btn-normal data-count-edit" lay-event="edit">处理</button>
                {{# }else{  }}
                <button class="layui-btn layui-btn-xs layui-btn-normal data-count-edit" lay-event="edit">处理</button>
                <button class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" >删除</button>
                {{# } }}

        </script>
        <div id="page"></div>
    </div>
</div>
<style>
    .read{
    position: absolute;
    padding: 4px 4px;
    top: -4px;
    right: -4px;
    background-color: red;
    color: #ffffff;
    border-radius:50%;
    behavior: url('/lib/PIE/PIE.htc');
    z-index: 10;
}
</style>
<script>
    //form表单
    layui.form.render();

    //开始日期
    var today = new Date();
    var start = layui.laydate.render({
        elem: '#date1',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        done: function (value, date, endDate) {
            if (value != "") {
                end.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                }
            } else {//清空以后最小值
                end.config.min = {
                    year: 1970,
                    month: 1,
                    date: 1,
                }
            }
        }
    });

    //结束日期
    var end = layui.laydate.render({
        elem: '#date2',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        done: function (value, date) {
            if (value != "") {
                start.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                }
            } else {//清空以后最大值
                start.config.max = {
                    year: today.getFullYear(),
                    month: today.getMonth(),
                    date: today.getDate()
                }
            }
        }
    });

    //初始化table
    // var $ = layui.jquery,

    var form = layui.form,
        laydate = layui.laydate,
        table = layui.table,
        cols = [
            { align: 'center', title: '序号', type: 'numbers', width: '5%' },
            { field: 'id', title: 'ID', width: '7%', hide: true },
            { field: 'title', title: '标题', align: 'center', width: '23%' },
            { field: 'senderName', title: '发布用户', align: 'center', width: '10%' },
            { field: 'sender', title: '发送人ID', align: 'center', hide: true },
            { field: 'sendTime', title: '发布时间', align: 'center', width: '15%' },
             { field: 'status', title: '状态', align: 'center',templet: '#getStatus', width: '10%' },
            // { field: 'status', title: '状态', align: 'center', width: '8%' ,templet: function(d){
            // var t = d.status;
            // if(t == 0){
            // return "未处理"
            // }else if(t == 1){
            // return "正在处理"
            // }else if(t == 2){
            // return "已处理"
            // }else if(t == 3){
            // return "不予处理"
            // }
            // }},
            { field: 'replierName', title: '回复人', align: 'center', width: '10%' },
            { field: 'replyTime', title: '回复时间', align: 'center', width: '15%' },
            { title: '操作', templet: '#currentTableBar',  align: "center",width: '12%' }
        ];

    layuiEx.tableRender('/admin/commons/queryCommons', 'currentTableId', 'page', cols, {
        page: 1,
        pageSize: 10,
    });

     // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
            startTime = $("#date1").val(),
            endTime = $("#date2").val(),
            status = $("#select2 option:selected").val(),
            layuiEx.tableRender('/admin/commons/queryCommons', 'currentTableId', 'page', cols, {
                startTime: startTime,
                endTime: endTime,
                status: status,
                page: 1,
                pageSize: 10
            });
        return false;
    });

    //监听删除和编辑操作
    layui.table.on('tool(currentTableFilter)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
            editData = obj.data;
            if (editData.replyState == 0) {
                shared.ajaxPost('/message/updateCommentState', { id: editData.id, state: editData.state }, function (res) {})
            }
            var content = layui.miniPage.getHrefContent('mypages/messageManagement/commons_edit.html');
            var openWH = layui.miniPage.getOpenWidthHeight();
            var index = layer.open({
                title: '回复消息',
                type: 1,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['1200px', '73%'],
                // area: ['60%', '73%'],
                // offset: ['10%', '15%'],//设置位移
                content: content,
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
        } else if (obj.event === 'delete') {
            layer.confirm('确定删除？', function (index) {
                deltDate = obj.data;
                shared.ajaxPost('/admin/commons/delCommons', deltDate, function (res) {
                    refreshTable();
                })
                layer.close(index);
            });
        }
    });

     //更新后刷新table
    function refreshTable() {
        cols = [
            { align: 'center', title: '序号', type: 'numbers', width: '5%' },
            { field: 'id', title: 'ID', width: '8%', hide: true },
            { field: 'title', title: '标题', align: 'center', width: '20%' },
            { field: 'senderName', title: '发布用户', align: 'center', width: '10%' },
            { field: 'sender', title: '发送人ID', align: 'center', hide: true },
            { field: 'sendTime', title: '发布时间', align: 'center', width: '15%' },
            { field: 'status', title: '状态', align: 'center',templet: '#getStatus', width: '8%' },
            { field: 'replierName', title: '回复人', align: 'center', width: '10%' },
            { field: 'replyTime', title: '回复时间', align: 'center', width: '15%' },
            { title: '操作', templet: '#currentTableBar',  align: "center" }
        ];

       var startTime = $("#date1").val();
       var  endTime = $("#date2").val();
       var  status = $("#select2 option:selected").val();
        layuiEx.tableRender('/admin/commons/queryCommons', 'currentTableId', 'page', cols, {
        startTime: startTime,
        endTime: endTime,
        status: status,
        page: 1,
        pageSize: 10,
        });
    }
</script>